<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #p1 {
        font-size: 900;
        margin: auto;
        text-align: center;
    }

    #big {
        width: 900px;
        height: 500px;
        border: 2px solid black;
        margin: auto;
        margin-top: 18px;
    }

    #p2 {
        font-size: 900;
        margin: auto;
        text-align: center;
    }

    input {
        width: 750px;
        height: 30px;
        border: 3px solid black;
        margin-left: 35px;
    }

    button {
        width: 70px;
        height: 35px;
    }

    #zhong {
        width: 9000;
        height: 80px;
        background-color: aqua;
    }

    #p3 {
        float: left;
        font-size: 700;
        text-align: center;
        margin-left: 220px;
    }

    #p4 {
        float: left;
        font-size: 700;
        margin-left: 240px;
    }

    #p5 {
        float: left;
        font-size: 700;
        margin-left: 190px;
    }
</style>

<body>
    <P id="p1"><b>积云教育 - 鸿蒙专业H2401C薛毅梵</b></P>
    <div id="big">
        <p id="p2"><b>任务记录</b></p>
        <input type="text"> <span><button id="tj">添加</button></span>
        <div id="zhong">
            <p id="p3">
                <b>需要完成的任务</b>
            </p>
            <p id="p4">
                <b>时间</b>
            </p>
            <p id="p5">
                <b>操作</b>
            </p>
        </div>
        <div id="xia">
            <ul>
            </ul>
        </div>
    </div>
</body>

</html>
<script>
    var but = document.querySelector('button');
    var inp = document.querySelector('input');
    var ul = document.querySelector('ul');
    but.onclick = function () {
        var li = document.createElement('li');
        li.innerHTML = `<span>${inp.value}</span> <span>${new Date().getFullYear()}年</span>  <span>${new Date().getMonth()}月</span>  <span>${new Date().getDate()}日</span>  <span>${new Date().getHours()}:</span>     <span>${new Date().getMinutes()}:</span>     <span>${new Date().getSeconds()}</span>   <span>星期${new Date().getDay()}</span>   <span><button>完成</button></span>   <span><button onclick="f1(this)">删除</button></span>`
        ul.append(li);
        var now = new Date;
        now.getDay()
        inp.value = ''
    }
    function f1(bbb) {
        ul.removeChild(bbb.parentNode.parentNode)
    }
    document.addEventListener('keyup', function (e) {
        console.log(e.keyCode);

        var tj = document.querySelector('#tj');
        if (e.keyCode == 83) {
            inp.focus();
        }
        if (e.keyCode == 13) {
            tj.onclick();
        }
    })
</script>